<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<script>

setTimeout(()=>{// f1
    console.log( 0 );
},0);
new Promise((resolve,reject)=>{// f2
    console.log( 1 );
    resolve();
})// p1
.then(()=>{// f3
    console.log( 2 );
    new Promise((resolve,reject)=>{// f4
        console.log( 3 );
        resolve();
    })
    .then(()=>{// f5
        console.log( 4 );
    })
    .then(()=>{// f6
        console.log( 5 );
    })
    // return undefined;
})// p2
.then(()=>{// f7
    console.log( 6 );
});
new Promise((resolve,reject)=>{// f8
    console.log( 7 );
    resolve();
})
.then(()=>{// f9
    console.log( 8 );
})
// 1 7 2 3 8 4 6 5 0

// 微任务队列：[f3,f9,f5,f7,f6]
// 宏任务队列：[f1]
// 执行栈：
// setTimeout() -> 给f1计时0毫秒，f1被加入宏任务队列
// new Promise()
    // f2()
        // console.log( 1 );
        // resolve(); -> Promise对象状态改变为成功
// then() -> f3符合执行条件，被加入微任务队列
// new Promise()
    // f8()
        // console.log( 7 );
        // resolve(); -> Promise对象状态改变为成功
// then() -> f9符合执行条件，被加入微任务队列
// 此时，JS引擎空闲了，优先处理微任务队列，再处理宏任务队列
// f3()
    // console.log( 2 );
    // new Promise()
        // f4()
            // console.log( 3 );
            // resolve(); -> Promise对象状态改变为成功
    // then() -> f5符合执行条件，被加入微任务队列
    // f3默认返回undefined -> Promise对象状态改变为成功 -> f7符合执行条件，被加入微任务队列
// 此时，JS引擎空闲了，优先处理微任务队列，再处理宏任务队列
// f9()
    // console.log( 8 );
// 此时，JS引擎空闲了，优先处理微任务队列，再处理宏任务队列
// f5()
    // console.log( 4 );
    // f5默认返回undefined -> Promise对象状态改变为成功 -> f6符合执行条件，被加入微任务队列
// 此时，JS引擎空闲了，优先处理微任务队列，再处理宏任务队列
// f7()
    // console.log( 6 );
// 此时，JS引擎空闲了，优先处理微任务队列，再处理宏任务队列
// f6()
    // console.log( 5 );
// 此时，JS引擎空闲了，优先处理微任务队列，再处理宏任务队列
// f1()
    // console.log( 0 );


</script>
</body>
</html>